<template>
  <div class="home">   
    <home-header/>
    <home-logo></home-logo>
    <home-swiper :list="iconList"></home-swiper>
    <home-recommend :list="recommendList"></home-recommend>
  </div>
</template>

<script>
// "./"代表本目录，"../"代表上一次目录
import HomeHeader from './components/HomeHeader.vue'
import HomeLogo from './components/HomeLogo.vue'
import HomeSwiper from './components/HomeSwiper.vue'
import HomeRecommend from './components/HomeRecommend.vue'
import axios from 'axios'

export default {
  name: 'home',
  components: {
    HomeHeader,
    HomeLogo,
    HomeSwiper,
    HomeRecommend
  },
  data: function(){
    return{
      iconList: [],
      recommendList: []
    }
  },
  mounted(){
    this.getHomeApiInfo()
  },
  methods: {
    getHomeApiInfo(){
      axios.get("/mock/home.json").then(this.getHomeResponseInfo)
    },
    getHomeResponseInfo(response){
      //  console.log(response.data);
      let res = response.data  //就是home.json里面的内容
      if(res.success && res.dataList){
        const data = res.dataList //取json中的datalist属性
        // console.log(data.iconLists.length)
        this.iconList = data.iconLists
        this.recommendList = data.recommendLists
      }
    }
  }
}
</script>
